<h2 translate>Backup</h2>

<uib-tabset>
	<uib-tab heading="{{'Action' | translate}}">
		<label translate>Create backup:</label>
		<p translate>The current configuration will be provided in a packed archive</p>
		<div class="panel panel-default panel-body text-left">
			<button class="btn btn-success" ng-click="View.downloadBackup()" translate>Create backup</button>
		</div>
		<label translate>Import backup:</label>
		<p translate>To restore a previously generated backup choose the archive and press "Import backup"</p>
		<div class="panel panel-default panel-body text-left">
			<label class="btn btn-primary" for="file">
				<input id="file" type="file" style="display:none;" file-model="View.myFile">
				Browse
			</label>
			<button class="btn btn-success" ng-disabled="View.uploadFileSelected()" ng-click="View.uploadBackup()" translate>Import backup</button>
			<input value="{{ View.getSelectedFileName() }}" disabled>
		</div>
	</uib-tab>
	<uib-tab heading="{{'Configuration' | translate}}">
		<p translate>This is a list of shell glob patterns for matching files and directories to include during sysupgrade. Modified files in /etc/config/ and certain other configurations are automatically preserved.</p>
		<div class="panel panel-default panel-body text-left">
			<button class="btn btn-success" translate ng-click="View.showBackupList()">Show detail</button>
		</div>
		<textarea class="form-control" rows="20" ng-model="View.backupconfig"></textarea><br>
		<div class="alert alert-success" ng-show="View.isBackupConfigChanged">
			<button type="button" class="close" ng-click="View.isBackupConfigChanged = false">&times;</button>
			<translate>The backup file list has been updated.</translate>
		</div>
		<div class="panel panel-default panel-body text-right">
			<button ng-click="View.changeBackupConfig()" translate type="button" class="btn btn-primary">Apply</button>
		</div>
	</uib-tab>
</uib-tabset>

<script type="text/ng-template" id="system/upgrade/list.html">
	<div class="modal-header">
		<h4 translate>Saved files</h4>
	</div>
	<div class="modal-body">
		<pre>{{listconfig.join("\n")}}</pre>
	</div>
	<div class="modal-footer">
		<button class="btn btn-success" translate ng-click="Dialog.confirm()">Ok</button>
	</div>
</script>

<script type="text/ng-template" id="system/backup/success.html">
	<div class="modal-header">
		<h4 translate>Import backup</h4>
	</div>
	<div class="modal-body">
		<div class="alert alert-info" role="alert">
			<p translate> Size {{data.size}} </p>
			<p translate> Checksum {{data.checksum}} </p>
		</div>
		<div class="alert alert-danger" role="alert">
			<p class="text-center" translate>The system will be rebooted</p>
		</div>
	</div>
	<div class="modal-footer">
		<button class="btn btn-danger" translate ng-click="Confirm.cancel()">Cancel</button>
		<button class="btn btn-success" translate ng-click="Confirm.backup()">Apply</button>
	</div>
</script>

